<template>
	<div class="zy-content checkMaintainDetail">
		<back-level @click="close" />
		<Card title="点检对象" class="detail-content-layout">
			<div class="basic-info">
				<div class="basic-info-body">
					<div class="titleItem">
						<div class="checkObject">
							<div class="checkObjectItem">
								<div class="checkObjectName">点检计划</div>
								<div class="checkObjectValue">
									<Tooltip max-width="200">
										<div class="over-wrapper">{{ detail.planName }}</div>
										<div slot="content">
											<p>{{ detail.planName }}</p>
										</div>
									</Tooltip>
								</div>
							</div>
							<div class="checkObjectItem">
								<div class="checkObjectName">{{ $t('设备等级') }}</div>
								<div class="checkObjectValue">{{ detail.deviceGrade }}</div>
							</div>
							<div class="checkObjectItem">
								<div class="checkObjectName">{{ $t('设备类别') }}</div>
								<div class="checkObjectValue">{{ detail.deviceCategory }}</div>
							</div>
							<div class="checkObjectItem">
								<div class="checkObjectName">
									{{ $t('maintenance.EquipmentName') }}
								</div>
								<div class="checkObjectValue">{{ detail.deviceName }}</div>
							</div>
							<div class="checkObjectItem">
								<div class="checkObjectName">
									{{ $t('maintenance.EquipmentNo') }}
								</div>
								<div class="checkObjectValue">{{ detail.deviceNo }}</div>
							</div>
							<div class="checkObjectItem">
								<div class="checkObjectName">
									{{ $t('equipCheck.SerialNo') }}
								</div>
								<div class="checkObjectValue">{{ detail.deviceMId }}</div>
							</div>
							<div class="checkObjectItem">
								<div class="checkObjectName">
									{{ $t('ledger.EquipmentType') }}
								</div>
								<div class="checkObjectValue">{{ detail.materialModel }}</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</Card>
		<Card title="点检时间" class="detail-content-layout mt16">
			<div class="basic-info">
				<div class="basic-info-body">
					<div class="titleItem">
						<div class="checkObject">
							<div class="checkObjectItem">
								<div class="checkObjectName">
									{{ $t('maintenance.Taskgenerationtime') }}
								</div>
								<div class="checkObjectValue">{{ detail.createTime }}</div>
							</div>
							<div class="checkObjectItem">
								<div class="checkObjectName">
									{{ $t('maintenance.TaskAllocationTime') }}
								</div>
								<div class="checkObjectValue">{{ detail.distriTime }}</div>
							</div>
							<div class="checkObjectItem">
								<div class="checkObjectName">点检开始时间</div>
								<div class="checkObjectValue">{{ detail.beginTime }}</div>
							</div>
							<div class="checkObjectItem">
								<div class="checkObjectName">点检结束时间</div>
								<div class="checkObjectValue">{{ detail.endTime }}</div>
							</div>
							<div class="checkObjectItem">
								<div class="checkObjectName">点检人</div>
								<div class="checkObjectValue">{{ detail.operateEmpno }} - {{ detail.operateName }}</div>
							</div>
							<div class="checkObjectItem">
								<div class="checkObjectName">协助点检人</div>
								<div class="checkObjectValue">
									<template v-if="showStatus">
										<Select
											filterable
											clearable
											label-in-value
											multiple
											:max-tag-count="2"
											v-model="detail.helpId"
											:remote-method="getUserList"
											@on-change="userChange"
										>
											<Option v-for="(item, index) in userList" :value="item.id" :label="item.realname" :key="index" />
										</Select>
									</template>
									<template v-else>
										{{ detail.assistMaintainBy }}
									</template>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</Card>
		<Card title="点检内容" class="detail-content-layout mt16">
			<div class="basic-info">
				<div class="basic-info-body">
					<div class="contentTable">
						<Table
							@on-column-width-resize="
								(a, b, c, d) => {
									onColumnWidthResize(a, b, c, d, 'maintenanceDetail0012');
								}
							"
							class="resizable-table"
							border
							ref="selection"
							:columns="contentColumns"
							:data="detail.ddevSpotCheckTaskSpotCheckRef"
						>
							<template slot-scope="{ row, index }" slot="action">
								<span class="operationBtn" @click="checkInfo(row, 1, index)">工具</span>
								<span class="operationBtn" @click="checkInfo(row, 2, index)">物料</span>
								<span class="operationBtn" @click="checkInfo(row, 3, index)">附件</span>
							</template>
							<template slot-scope="{ row }" slot="checkResult">
								<template v-if="showStatus && Number(detail.status) < 2">
									<RadioGroup v-model="row.checkResult" @on-change="resultStatusChange(row)">
										<Radio :label="'1'">正常</Radio>
										<Radio :label="'2'">异常</Radio>
									</RadioGroup>
								</template>
								<template v-else>{{ row.checkResult ? (row.checkResult == 1 ? '正常' : '异常') : '' }}</template>
							</template>
							<template slot-scope="{ row }" slot="resultrecord">
								<template v-if="showStatus && Number(detail.status) < 2">
									<Input v-model="row.checkResultDesc" clearable type="text" @on-change="resultValueChange(row)" />
								</template>
								<template v-else>{{ row.checkResultDesc }}</template>
							</template>
						</Table>
					</div>
				</div>
			</div>
		</Card>
		<Card
			:title="`${$t('preliminary.confirmInformation')}`"
			v-if="Number(this.datingObj.status) > 1 && Number(this.datingObj.status) < 5 && detail.affirmTime"
			class="detail-content-layout mt16"
		>
			<div class="basic-info">
				<div class="basic-info-body">
					<div class="titleItem">
						<div class="checkObject">
							<div class="checkObjectItem">
								<div class="checkObjectName">
									{{ $t('maintenance.ConfirmedTime') }}
								</div>
								<div class="checkObjectValue">{{ detail.affirmTime }}</div>
							</div>
							<div class="checkObjectItem">
								<div class="checkObjectName">
									{{ $t('maintenance.ConfirmedBy') }}
								</div>
								<div class="checkObjectValue">{{ detail.affirmName }}</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</Card>
		<!-- <Card
			v-if="Number(detail.status) < 5 && Number(datingObj.status) > 1"
			:title="`${$t('maintenance.MaintenanceScoring')}`"
			class="detail-content-layout mt16"
		>
			<div class="basic-info">
				<div class="basic-info-body">
					<div class="titleItem">
						<div class="scoreBox">
							<div class="item_score">
								<span class="text">{{ $t('服务态度评分') }}: </span>
								<Rate :disabled="!beconfirmed" v-model="serveScore" clearable />
							</div>
							<div class="item_score">
								<span class="text">{{ $t('技术能力评分') }}: </span>
								<Rate :disabled="!beconfirmed" v-model="technologyScore" clearable />
							</div>
							<div class="item_score">
								<span class="text">{{ $t('响应速度评分') }}: </span>
								<Rate :disabled="!beconfirmed" v-model="responseScore" clearable />
							</div>
						</div>
					</div>
				</div>
			</div>
		</Card> -->
		<Modal :mask-closable="false" v-model="visible" :title="`${$t('common.Detail')}`" class="checkContentModal" width="1200" footer-hide>
			<contentDetail :planMaterialList="materialList" :planToolList="toolList"></contentDetail>
		</Modal>

		<Modal :mask-closable="false" v-model="useTableStatus" :title="`${$t('maintenance.usetools')}`" class="checkContentModal" width="900" footer-hide>
			<div class="materBox">
				<div class="icon" @click="handleTool" v-if="showStatus && Number(this.detail.status) < 2">
					<Icon type="md-add" color="#187BDB" />{{ $t('maintenance.AddTools') }}
				</div>
				{{ useTablelist }}
				<Table
					@on-column-width-resize="
						(a, b, c, d) => {
							onColumnWidthResize(a, b, c, d, 'UsetoolsA001');
						}
					"
					class="resizable-table"
					border
					:columns="useTableColumn"
					:data="useTablelist"
				>
					<template slot-scope="{ row }" slot="action">
						<span class="operationBtn" @click="toolEdit(row, index)">{{ $t('common.Edit') }}</span>
						<span class="operationBtn" @click="toolDelete(row, index)">{{ $t('common.Delete') }}</span>
					</template>
				</Table>
			</div>
		</Modal>

		<Modal
			:mask-closable="false"
			v-model="fileTableStatus"
			:title="`${$t('ledger.attachmentinformation')}`"
			class="checkContentModal"
			width="900"
			footer-hide
		>
			<div class="imgBoxlist">
				<template v-if="showStatus && Number(this.detail.status) < 2">
					<div class="videoList">
						<Row>
							<Col :span="4" v-for="(file, index) in tarGetObj.attachments" :key="index">
								<template>
									<div class="itemCol">
										<van-badge>
											<template>
												<span class="item" @click="previewClicjk(file, index, tarGetObj.attachments)">
													<template v-if="!file.filepath.includes('video')">
														<img :src="util.filePathToUrl(file.filepath)" alt="" />
													</template>
													<template v-else>
														<video preload="auto" loop autoplay muted>
															<source :src="util.filePathToUrl(file.filepath)" type="video/mp4" />
														</video>
													</template>
												</span>
											</template>
											<template #content>
												<van-icon @click="delFujian(file, tarGetObj)" name="cross" class="badge-icon" />
											</template>
										</van-badge>
									</div>
								</template>
							</Col>
							<Col :span="4">
								<div class="itemCol videoCol">
									<van-uploader accept="*" :show-upload-list="false" :after-read="afterRead">
										<template #preview-cover="{ file }">
											<span class="text">{{ $t('maintenance.New') }}</span>
										</template>
									</van-uploader>
								</div>
							</Col>
						</Row>
					</div>
				</template>
				<template v-else>
					<template v-if="tarGetObj.attachments && tarGetObj.attachments.length">
						<div class="videoList">
							<Row>
								<Col :span="4" v-for="(list, index) in tarGetObj.attachments" :key="index">
									<div class="itemCol">
										<span class="item" @click="previewClicjk(list, index, tarGetObj.attachments, 'target')">
											<template v-if="!list.filePath.includes('video')">
												<img :src="util.filePathToUrl(list.filePath)" alt="" />
											</template>
											<template v-else>
												<video preload="auto" loop autoplay muted>
													<source :src="util.filePathToUrl(list.filePath)" type="video/mp4" />
												</video>
											</template>
										</span>
									</div>
								</Col>
							</Row>
						</div>
					</template>
				</template>
			</div>
		</Modal>
		<!-- 附件 -->
		<Modal :mask-closable="false" v-model="sopStatus" :title="`${$t('点检SOP')}`" class="checkContentModal" width="900" footer-hide>
			<div class="imgBoxlist">
				<div class="videoList">
					<Row>
						<Col :span="4" v-for="(list, index) in sopRow.attachment" :key="index">
							<div class="itemCol">
								<span class="item" @click="previewClicjk(list, index, sopRow.attachment)">
									<template v-if="util.fileType(list.filePath) === 'image'">
										<img :src="util.filePathToUrl(list.filePath)" alt="" />
									</template>
									<template v-else-if="util.fileType(list.filePath) === 'video'">
										<video preload="auto" loop autoplay muted>
											<source :src="util.filePathToUrl(list.filePath)" type="video/mp4" />
										</video>
									</template>
									<template v-else>
										<span class="fileSty">
											<span>{{ list.fileName }}</span>
										</span>
									</template>
								</span>
							</div>
						</Col>
					</Row>
				</div>
			</div>
		</Modal>

		<Modal
			:mask-closable="false"
			v-model="materTableStatus"
			:title="`${$t('maintenance.Usematerial')}`"
			class="checkContentModal"
			width="900"
			footer-hide
		>
			<div class="materBox">
				<div class="icon" @click="handleMaterial" v-if="showStatus && Number(this.detail.status) < 2">
					<Icon type="md-add" color="#187BDB" />{{ $t('maintenance.Addmaterial') }}
				</div>
				<Table
					@on-column-width-resize="
						(a, b, c, d) => {
							onColumnWidthResize(a, b, c, d, 'MaterialA001');
						}
					"
					class="resizable-table"
					border
					:columns="contentColumnsInfo"
					:data="materTablelist"
				>
					<template slot-scope="{ row, index }" slot="action">
						<span class="operationBtn" @click="materEdit(row, index)">{{ $t('common.Edit') }}</span>
						<span class="operationBtn" @click="materDelete(row, index)">{{ $t('common.Delete') }}</span>
					</template>
				</Table>
			</div>
		</Modal>
		<!--    添加物料-->
		<Modal
			:mask-closable="false"
			v-model="materialVisible"
			width="640"
			@on-visible-change="visibleChange"
			class="addModal modal-content-layout"
			:title="`${$t('maintenance.materialinfo')}`"
		>
			<div class="addProject">
				<Form label-position="top">
					<FormItem :label="$t('maintenance.MaterialnoInfo')" required>
						<template v-if="materiaStatus == 'add'">
							<Select filterable clearable v-model="tableMaterial.materialCode" :remote-method="materielNoChange" @on-change="materieChange">
								<Option v-for="item in materielNoList" :value="item.materialCode" :label="item.materialCode" :key="item.materialCode" />
							</Select>
						</template>
						<template v-else>
							<Input disabled v-model="tableMaterial.materialCode" />
						</template>
					</FormItem>
					<FormItem :label="$t('common.GoodsName')" required>
						<Input class="inputWrapper" disabled v-model="tableMaterial.materialName" />
					</FormItem>
					<FormItem :label="$t('common.Specification')">
						<Input class="inputWrapper" disabled v-model="tableMaterial.materialModel" />
					</FormItem>
					<FormItem :label="$t('spareParts.quantity')" required>
						<InputNumber :min="1" :disabled="tableMaterial.numStatus" v-model="tableMaterial.materialNum" />
					</FormItem>
				</Form>
			</div>

			<div slot="footer">
				<Button type="default" @click="materiaClose">{{ $t('common.Cancle') }}</Button>
				<Button type="primary" @click="materiaTableobj">{{ $t('maintenance.Confirmed') }}</Button>
			</div>
		</Modal>
		<!--   添加工具-->
		<Modal
			:mask-closable="false"
			v-model="toollVisible"
			width="640"
			@on-visible-change="toolvisibleChange"
			class="addModal modal-content-layout"
			:title="`${$t('maintenance.usetools')}`"
		>
			<div class="addProject">
				<Form label-position="top">
					<FormItem :label="$t('maintenance.Materialno')" required>
						<template v-if="toolStatus == 'add'">
							<Select filterable clearable v-model="tableTool.deviceMId" :remote-method="toolNoChange" @on-change="toolChange">
								<Option v-for="item in toolNoList" :value="item.deviceMId" :label="item.deviceMId + '-' + item.deviceName" :key="item.deviceMId" />
							</Select>
						</template>
						<template v-else>
							<Input disabled v-model="tableTool.deviceMId" />
						</template>
					</FormItem>
					<FormItem :label="$t('maintenance.ToolName')" required>
						<Input class="inputWrapper" disabled v-model="tableTool.deviceName" />
					</FormItem>
					<FormItem :label="$t('保管方式')">
						<Input class="inputWrapper" v-model="tableTool.keepWay" />
					</FormItem>
					<FormItem :label="$t('maintenance.Amount')" required>
						<InputNumber :min="1" :disabled="tableTool.numStatus" v-model="tableTool.deviceNum" />
					</FormItem>
				</Form>
			</div>

			<div slot="footer">
				<Button type="default" @click="toolClose">{{ $t('common.Cancle') }}</Button>
				<Button type="primary" @click="toolTableobj">{{ $t('maintenance.Confirmed') }}</Button>
			</div>
		</Modal>

		<repair ref="addModal" @cancleBack="cancleBack" />

		<gallery :images="galleryImages" :index="galleryIndex" @close="galleryIndex = null"></gallery>
		<div class="box_footer mt16">
			<span class="btn" @click="cancleRetu">{{ $t('maintenance.Backlevel') }}</span>
			<template>
				<span v-if="showStatus || (beconfirmed && confirmedBy)" class="btn" @click="endBao">{{ baoStr }}</span>
			</template>
		</div>
		<iframeModalCompent
			v-if="iframeShow"
			:isStudy="false"
			:iframeShow="iframeShow"
			:iframeModalSrc="iframeModalSrc"
			@closeIframe="iframeShow = false"
		></iframeModalCompent>
	</div>
</template>

<script>
import { addfileUpload, delfileUpload, fileUpload, finishCase, getListitems } from '@/api/maintenance/deviceSpotCheck.js';
import toggleTableOperation from '@/mixins/toggleTableOperation';
import repair from '@/views/fault/workOrderHall/modules/addModal.vue';
import iframeModalCompent from '@/views/knowledgeBase/modal/iframe.vue';
import fileDownload from 'js-file-download';
import VueGallery from 'vue-gallery';
import { mapGetters } from 'vuex';
import contentDetail from '../maintain/contentDetail';
export default {
	name: 'checkMaintainDetail',
	mixins: [toggleTableOperation],
	components: {
		contentDetail,
		gallery: VueGallery,
		repair,
		iframeModalCompent,
	},
	data() {
		return {
			iframeShow: false, // 预览弹窗
			iframeModalSrc: '',
			sopRow: {},
			sopStatus: false,
			tarGetid: '',
			repairShow: false,
			fileListArr: [],
			tableTool: {},
			tableMaterial: {},
			toollVisible: false,
			materialVisible: false,
			beconfirmed: false,
			materiaStatus: 'add',
			toolStatus: 'add',
			serveScore: '',
			technologyScore: '',
			responseScore: '',
			tarGetObj: {},
			detail: {},
			galleryIndex: null,
			galleryImages: [],
			showStatus: false,
			total: 64,
			pageSize: 10,
			pageNum: 1,
			visible: false,
			userList: [],
			pageSizeOption: [10, 20, 30, 40],
			useTableColumn: [
				{
					type: 'index',
					width: 90,
					title: `${this.$t('common.index')}`,
					align: 'center',
				},
				{
					title: `${this.$t('maintenance.ToolMaterialNo')}`,
					key: 'deviceMId',
					align: 'center',
					resizable: true,
				},
				{
					title: `${this.$t('maintenance.Toolnames')}`,
					key: 'deviceName',
					align: 'center',
					resizable: true,
				},
				{
					title: `${this.$t('spareParts.quantity')}`,
					key: 'deviceNum',
					align: 'center',
					resizable: true,
				},
				{
					title: `${this.$t('保管方式')}`,
					key: 'keepWay',
					align: 'center',
					resizable: true,
				},
				{
					title: `${this.$t('common.operation')}`,
					key: 'action',
					align: 'center',
					slot: 'action',
				},
			],
			contentColumnsInfo: [
				{
					type: 'index',
					width: 90,
					title: `${this.$t('common.index')}`,
					align: 'center',
				},
				{
					title: `${this.$t('maintenance.MaterialnoInfo')}`,
					key: 'materialCode',
					align: 'center',
					width: 170,
					resizable: true,
				},
				{
					title: `${this.$t('common.GoodsName')}`,
					key: 'materialName',
					align: 'center',
					width: 170,
					resizable: true,
				},
				{
					title: `${this.$t('spareParts.Specification')}`,
					key: 'materialModel',
					align: 'center',
					width: 170,
					resizable: true,
				},
				{
					title: `${this.$t('spareParts.quantity')}`,
					key: 'materialNum',
					width: 170,
					align: 'center',
					resizable: true,
				},
				{
					title: `${this.$t('common.operation')}`,
					key: 'action',
					width: 170,
					align: 'center',
					slot: 'action',
				},
			],
			contentColumns: [
				{
					title: '点检项目',
					key: 'checkName',
					align: 'center',
					width: 180,
					tooltip: true,
					resizable: true,
				},
				{
					title: '点检方式',
					key: 'checkMode',
					align: 'center',
					width: 200,
					tooltip: true,
					resizable: true,
				},
				{
					title: '点检标准',
					key: 'checkStandard',
					align: 'center',
					width: 200,
					tooltip: true,
					resizable: true,
				},
				{
					title: '需求人数',
					key: 'reqPNum',
					align: 'center',
					width: 160,
					tooltip: true,
					resizable: true,
				},
				{
					title: '标准工时(s)',
					key: 'manHour',
					align: 'center',
					width: 180,
					tooltip: true,
					resizable: true,
				},
				{
					title: '点检结果',
					key: 'checkResult',
					align: 'center',
					width: 150,
					slot: 'checkResult',
					tooltip: true,
					resizable: true,
					renderHeader: (h) => {
						return h(
							'div',
							this.showStatus && Number(this.detail.status) < 2
								? [
										h('Checkbox', {
											style: {
												display: 'inline-block',
												margin: '0 5px 0 0 !important',
											},
											on: {
												'on-change': (val) => {
													this.changeradio(val);
												},
											},
										}),
										h('span', {
											domProps: {
												innerHTML: '点检结果',
											},
										}),
								  ]
								: [h('span', '点检结果')]
						);
					},
				},
				{
					title: '点检结果记录',
					key: 'checkResultDesc',
					slot: 'resultrecord',
					align: 'center',
					width: 200,
					tooltip: true,
					resizable: true,
				},
				{
					title: '点检SOP',
					key: 'taskFile',
					align: 'center',
					minWidth: 200,
					resizable: true,
					tooltip: true,
					render: (h, params) => {
						if (params.row.taskFile && params.row.taskFile.length) {
							return h('div', [
								h(
									'span',
									{
										style: {
											color: '#187BDB',
											cursor: 'pointer',
										},
										on: {
											click: () => {
												this.sopStatus = true;
												this.sopRow = params.row;
											},
										},
									},
									'查看'
								),
							]);
						} else {
							return h('div', [h('span', '无')]);
						}
					},
				},
				{
					title: `${this.$t('common.operation')}`,
					slot: 'action',
					width: 220,
					align: 'center',
					fixed: 'right',
				},
			],
			hearRadio: false,
			projectStr: '',
			data: [],
			materialList: [],
			useTablelist: [],
			useTableStatus: false,
			toolNoList: [],
			materielNoList: [],
			fileTablelist: [],
			fileTableStatus: false,
			sucessStatus: true,
			materTablelist: [],
			materTableStatus: false,
			toolList: [],
			index: '',
		};
	},
	computed: {
		...mapGetters(['datingObj']),
	},
	created() {
		this.getColumnWidth(this.contentColumnsInfo, 'MaterialA001');
		this.getColumnWidth(this.useTableColumn, 'UsetoolsA001');
	},
	mounted() {
		this.getDataListinfo();
		this.$nextTick(() => {
			this.baoStr = `${this.$t('完成点检')}`;
			if (Number(this.datingObj.status) === 1) {
				this.reloadEdit = true;
			}
			if (Number(this.datingObj.status) === 4) {
				this.beconfirmed = true;
				this.baoStr = `${this.$t('完成确认')}`;
			}
			if (Number(this.datingObj.status) !== 1 && Number(this.datingObj.status) !== 4) {
				this.useTableColumn = this.useTableColumn.filter((val) => val.key !== 'action');
				this.contentColumnsInfo = this.contentColumnsInfo.filter((val) => val.key !== 'action');
				this.showStatus = false;
			} else {
				this.showStatus = true;
				// this.contentColumns = this.contentColumns.filter(val=>val.title !== '点检SOP')
			}
		});
	},
	methods: {
		getUserList(query) {
			if (!query) {
				return;
			}
			const fn = this.debounceSerach(() => {
				this.axios({
					method: 'post',
					url: '/dms/workOrder/getUsers',
					data: {
						pageNum: 1,
						pageSize: 100,
						key: query,
					},
				}).then((res) => {
					if (res.code === 200) {
						this.userList = res.data;
					} else {
						this.$Message.warning({
							content: res.msg,
							duration: 6,
							closable: true,
						});
					}
				});
			}, 300);
			fn();
		},
		userChange(val) {
			this.detail.helpName = val.map((item) => item.label).join(',');
			// const arg = this.userList.find((item) => item.id === this.detail.helpId);
			// if (!arg) {
			//   this.detail.helpName = arg.name;
			// }
		},
		async getDataListinfo() {
			const { data } = await getListitems({
				id: this.datingObj.id,
			});
			this.detail = {
				...data,
				ddevSpotCheckTaskSpotCheckRef: data.ddevSpotCheckTaskSpotCheckRef || [],
			};
			this.responseScore = data.responseScore;
			this.serveScore = data.serveScore;
			this.technologyScore = data.technologyScore;

			// if (data.ddevSpotCheckTaskSpotCheckRef && data.ddevSpotCheckTaskSpotCheckRef.length) {
			//   data.ddevSpotCheckTaskSpotCheckRef.forEach(item => {
			//     if (item.attachments && item.attachments.length) {
			//       item.attachments.forEach(val => val.filepath = val.filePath)
			//     }
			//   })
			// }

			// this.tarGetObj = data.ddevSpotCheckTaskSpotCheckRef.find(val => val.id === this.tarGetObj.id)
		},
		changeradio(val) {
			if (val) {
				this.detail.ddevSpotCheckTaskSpotCheckRef.forEach((val) => this.$set(val, 'checkResult', '1'));
			} else {
				this.detail.ddevSpotCheckTaskSpotCheckRef.forEach((val) => this.$set(val, 'checkResult', null));
			}
		},
		weixiucancle() {
			if (!(this.detail.ddevSpotCheckTaskSpotCheckRef && this.detail.ddevSpotCheckTaskSpotCheckRef.length)) {
				return;
			}
			this.sumbitEnter();
			this.sucessStatus = true;
		},
		cancleBack() {
			// this.repairShow = false
		},
		weixiuClick() {
			this.tarGetid = this.datingObj.deviceMId;
			this.$refs.addModal.show(this.tarGetid);
			this.sumbitEnter(true);
		},
		resultStatusChange(row) {
			this.detail.ddevSpotCheckTaskSpotCheckRef.forEach((val) => {
				if (val.id === row.id) {
					val.checkResult = row.checkResult;
				}
			});
		},
		resultValueChange(row) {
			this.detail.ddevSpotCheckTaskSpotCheckRef.forEach((val) => {
				if (val.id === row.id) {
					val.checkResultDesc = row.checkResultDesc;
				}
			});
		},
		dataURLtoFileFun(dataurl, filename) {
			let arr = dataurl.split(',');
			let mime = arr[0].match(/:(.*?);/)[1];
			let bstr = atob(arr[1]);
			let n = bstr.length;
			let u8arr = new Uint8Array(n);
			while (n--) {
				u8arr[n] = bstr.charCodeAt(n);
			}
			return new File([u8arr], filename, { type: mime });
		},
		async delFujian(item, obj) {
			if (item.id) {
				const params = {
					id: item.id,
				};
				const { data } = await delfileUpload(params);
				if (data === '删除成功!') {
					obj.attachments = obj.attachments.filter((val) => val.filepath !== item.filepath);
				}
			} else {
				obj.attachments = obj.attachments.filter((val) => val.filepath !== item.filepath);
			}
		},
		afterRead(file, name) {
			if (!this.tarGetObj.itemId) {
				return;
			}
			if (file.file.type.indexOf('video') !== -1 || file.file.type.indexOf('image') !== -1) {
				let formData = new FormData();
				formData.append('dir', 'device');
				if (file.file.type.indexOf('image') !== -1) {
					formData.append('file', this.dataURLtoFileFun(file.content, 'file.jpg'));
				}
				if (file.file.type.indexOf('video') !== -1) {
					formData.append('file', this.dataURLtoFileFun(file.content, 'file.video'));
				}
				let config = {
					headers: {
						'Content-Type': 'multipart/form-data',
					},
				};
				fileUpload(formData, config).then((res) => {
					if (res.code == 200) {
						if (!res.data.fileLength) {
							return;
						}
						const data = [res.data].map((val) => ({
							itemId: this.tarGetObj.itemId,
							taskId: this.detail.id,
							fileName: val.fileName,
							filePath: val.filepath,
							fileUrl: val.fileUrl,
						}));
						addfileUpload(data);
						res.data.itemId = this.tarGetObj.itemId;
						res.data.taskId = this.detail.id;
						if (this.tarGetObj.attachments && this.tarGetObj.attachments.length) {
							this.tarGetObj.attachments = this.tarGetObj.attachments.concat([res.data]);
						} else {
							this.tarGetObj.attachments.push(res.data);
						}
					}
				});
			} else {
				this.$Message.error('只能上传视频/图片');
			}
		},
		toolvisibleChange(val) {
			if (!val) {
				this.toolStatus = 'add';
			}
		},
		visibleChange(val) {
			if (!val) {
				this.materiaStatus = 'add';
			}
		},
		toolEdit(row) {
			this.toolStatus = 'edit';
			this.tableTool = row;
			this.toollVisible = true;
		},
		materEdit(row) {
			this.materiaStatus = 'edit';
			this.tableMaterial = row;
			this.materialVisible = true;
		},
		toolChange(val) {
			if (!val) {
				return;
			}
			const obj = this.toolNoList.find((item) => item.deviceMId == val);
			if (obj) {
				this.tableTool = {
					isEdit: false,
					deviceId: obj.id,
					deviceMId: obj.deviceMId,
					deviceName: obj.deviceName,
					keepWay: '',
					deviceSpec: obj.deviceSpec,
					deviceNum: this.tableTool.deviceNum,
				};
			}
		},
		materieChange(val) {
			if (!val) {
				return;
			}
			const obj = this.materielNoList.find((item) => item.materialCode == val);
			if (obj) {
				this.tableMaterial = {
					materialId: obj.id,
					materialCode: obj.materialCode,
					materialName: obj.materialName,
					materialModel: obj.materialModel,
					materialNum: this.tableMaterial.materialNum,
				};
			}
		},
		debounceSerach(fn, delay) {
			let _this = this;
			return function f(...args) {
				if (_this.timeID) {
					clearTimeout(_this.timeID);
				}
				_this.timeID = setTimeout(() => {
					fn(args);
				}, delay);
			};
		},
		toolNoChange(val) {
			if (!val) {
				return;
			}
			const fn = this.debounceSerach(() => {
				const params = {
					deviceMId: val,
					pageSize: 50,
					pageNum: 1,
					deviceType: '工具',
				};
				this.axios({
					method: 'post',
					url: '/dms/device/page',
					data: params,
				}).then((res) => {
					if (res.code === 200) {
						if (res.data) {
							this.toolNoList = res.data.records || [];
						}
					} else {
						this.$Message.warning({
							content: res.msg,
							duration: 6,
							closable: true,
						});
					}
				});
			}, 360);
			fn();
		},
		materielNoChange(val) {
			if (val && this.materielNoList.find((item) => item.materialCode + '-' + item.materielName === val)) {
				return;
			}
			const fn = this.debounceSerach(() => {
				const params = {
					materialCode: val,
					pageNum: 1,
					pageSize: 99,
				};
				this.axios({
					method: 'post',
					url: '/dms/material/page',
					data: { ...params },
				}).then((res) => {
					if (res.code === 200) {
						this.materielNoList = res.data.records;
					} else {
						this.$Message.warning({
							content: res.msg,
							duration: 6,
							closable: true,
						});
					}
				});
			}, 360);
			fn();
		},
		toolClose() {
			this.toollVisible = false;
		},
		materiaClose() {
			this.materialVisible = false;
		},
		toolDelete(row, index) {
			this.$Message.success('删除成功!');
			this.detail.ddevSpotCheckTaskSpotCheckRef[this.index].ddevSpotCheckTaskDevRefs.splice(index, 1);
			this.useTablelist = this.detail.ddevSpotCheckTaskSpotCheckRef[this.index].ddevSpotCheckTaskDevRefs;
		},
		materDelete(row, index) {
			this.$Message.success('删除成功!');
			this.detail.ddevSpotCheckTaskSpotCheckRef[this.index].ddevSpotCheckTaskMaterialRefs.splice(index, 1);
			this.materTablelist = this.detail.ddevSpotCheckTaskSpotCheckRef[this.index].ddevSpotCheckTaskMaterialRefs;
		},

		toolTableobj() {
			if (!this.tableTool.deviceMId) {
				this.$Message.error({
					content: '请填写工具物料号!',
					duration: 3,
					closable: true,
				});
				return;
			}
			if (!this.tableTool.deviceName) {
				this.$Message.error({
					content: '请填写工具名称!',
					duration: 3,
					closable: true,
				});
				return;
			}
			if (!this.tableTool.keepWay) {
				this.$Message.error({
					content: '请填写保管方式!',
					duration: 3,
					closable: true,
				});
				return;
			}
			if (!this.tableTool.deviceNum) {
				this.$Message.error({
					content: '请填写数量!',
					duration: 3,
					closable: true,
				});
				return;
			}
			if (this.toolStatus !== 'edit') {
				const flag = this.detail.ddevSpotCheckTaskSpotCheckRef[this.index].ddevSpotCheckTaskDevRefs.find(
					(val) => val.deviceMId === this.tableTool.deviceMId
				);
				if (flag) {
					this.$Message.error({
						content: '该工具已添加',
						duration: 3,
						closable: true,
					});
					return;
				} else {
					this.detail.ddevSpotCheckTaskSpotCheckRef[this.index].ddevSpotCheckTaskDevRefs.push(this.tableTool);
					this.useTablelist = this.detail.ddevSpotCheckTaskSpotCheckRef[this.index].ddevSpotCheckTaskDevRefs;
					this.toollVisible = false;
				}
			} else {
				const index = this.detail.ddevSpotCheckTaskSpotCheckRef[this.index].ddevSpotCheckTaskDevRefs.findIndex(
					(val) => val.deviceMId === this.tableTool.deviceMId
				);
				this.detail.ddevSpotCheckTaskSpotCheckRef[this.index].ddevSpotCheckTaskDevRefs[index] = this.tableTool;
				this.toollVisible = false;
			}
		},
		materiaTableobj() {
			if (!this.tableMaterial.materialCode) {
				this.$Message.error({
					content: '请填写工具物料号!',
					duration: 3,
					closable: true,
				});
				return;
			}
			if (!this.tableMaterial.materialName) {
				this.$Message.error({
					content: '请填写品名!',
					duration: 3,
					closable: true,
				});
				return;
			}
			// if (!this.tableMaterial.materialModel) {
			//   this.$Message.error(({ content: '请填写规格!', duration: 3, closable: true }));
			//   return;
			// }
			if (!this.tableMaterial.materialNum) {
				this.$Message.error({
					content: '请填写数量!',
					duration: 3,
					closable: true,
				});
				return;
			}
			if (this.materiaStatus !== 'edit') {
				const flag = this.materTablelist.some((val) => val.materialCode === this.tableMaterial.materialCode);
				if (flag) {
					this.$Message.error({
						content: '该物料已添加',
						duration: 3,
						closable: true,
					});
					return;
				}
			}
			if (this.materiaStatus !== 'edit') {
				const flag = this.detail.ddevSpotCheckTaskSpotCheckRef[this.index].ddevSpotCheckTaskMaterialRefs.find(
					(val) => val.materialCode === this.tableMaterial.materialCode
				);
				if (flag) {
					this.$Message.error({
						content: '该物料已添加',
						duration: 3,
						closable: true,
					});
					return;
				} else {
					this.detail.ddevSpotCheckTaskSpotCheckRef[this.index].ddevSpotCheckTaskMaterialRefs.push(this.tableMaterial);
					this.materTablelist = this.detail.ddevSpotCheckTaskSpotCheckRef[this.index].ddevSpotCheckTaskMaterialRefs;
					this.materialVisible = false;
				}
			} else {
				const index = this.detail.ddevSpotCheckTaskSpotCheckRef[this.index].ddevSpotCheckTaskMaterialRefs.findIndex(
					(val) => val.deviceMId === this.tableMaterial.deviceMId
				);
				this.detail.ddevSpotCheckTaskSpotCheckRef[this.index].ddevSpotCheckTaskMaterialRefs[index] = this.tableMaterial;
				this.materialVisible = false;
			}
		},
		handleTool() {
			this.tableTool = {
				deviceNum: 1,
			};
			this.toolNoList = [];
			this.toollVisible = true;
		},
		handleMaterial() {
			this.tableMaterial = {
				materialNum: 1,
			};
			this.materielNoList = [];
			this.materialVisible = true;
		},
		cancleRetu() {
			this.$router.go(-1);
			this.$store.commit('detail/SET_DETAILOBJ', []);
			this.$store.commit('detail/SET_SUMBITSTATUS', false);
			this.$store.commit('detail/SET_MAINBY', '');
		},
		endBao() {
			if (!(this.detail.ddevSpotCheckTaskSpotCheckRef && this.detail.ddevSpotCheckTaskSpotCheckRef.length)) {
				this.$Message.warning('请先添加工具和物料');
				return;
			}
			const flag = this.detail.ddevSpotCheckTaskSpotCheckRef.every((val) => !!val.checkResult && !!val.checkResultDesc);
			const flagNull = this.detail.ddevSpotCheckTaskSpotCheckRef.every((val) => !val.checkResultDesc);
			// if (
			//   !flag &&
			//   (Number(this.datingObj.status) === 1 ||
			//     Number(this.datingObj.status) === 2)
			// ) {
			//   const arr = this.detail.ddevSpotCheckTaskSpotCheckRef.map((val) => {
			//     if (Number(val.checkResult) === 2) {
			//       return val.itemProject;
			//     }
			//   });
			//   if (arr && arr.length && !flagNull) {
			//     this.projectStr = arr.join(",");
			//     this.sucessStatus = false;
			//   } else {
			//     this.$Message.info("请完善点检项目");
			//   }
			//   return;

			// }

			if (flag) {
				this.sucessStatus = false;
			} else {
				this.$Message.info('请完善点检项目');
				return;
			}
			// this.$Message.warning('可以提交')
			this.sumbitEnter();
		},
		sumbitEnter(flag) {
			let data = {
				taskId: this.detail.id,
			};

			let url = '/dms/devSpotCheckTask/updateTaskResultById';
			if (this.baoStr !== '完成点检') {
				url = '/dms/devSpotCheckTask/affirmTask';

				data = {
					id: this.detail.id,
					// helpName: this.detail.helpName,
					// helpId:this.detail.helpId,
					// ddevSpotCheckTaskSpotCheckRef:this.detail.ddevSpotCheckTaskSpotCheckRef,
				};
				data['serveScore'] = this.serveScore;
				data['technologyScore'] = this.technologyScore;
				data['responseScore'] = this.responseScore;
				// if (!this.serveScore) {
				//   this.$Message.warning("请评分服务态度！");
				//   return;
				// }
				// if (!this.technologyScore) {
				//   this.$Message.warning("请评分技术能力！");
				//   return;
				// }
				// if (!this.responseScore) {
				//   this.$Message.warning("请评分响应速度！");
				//   return;
				// }
				this.axios({
					url,
					method: 'post',
					params: data,
				}).then((res) => {
					if (res.code !== 200) {
						this.$Message.warning(res.msg);
					}
					if (!flag) {
						this.$router.push('/devScene/deviceSpotCheck/hall');
					}
				});
			} else {
				data = {
					id: this.detail.id,
					helpName: this.detail.helpName,
					helpId: this.detail.helpId ? this.detail.helpId.join(',') : '',
					ddevSpotCheckTaskSpotCheckRef: this.detail.ddevSpotCheckTaskSpotCheckRef,
				};
				// if (this.detail.ddevSpotCheckTaskSpotCheckRef && this.detail.ddevSpotCheckTaskSpotCheckRef.length) {
				//   data.results = this.detail.ddevSpotCheckTaskSpotCheckRef.map(val => ({
				//     taskId: this.detail.id,
				//     projectId: val.id,
				//     checkResultDesc: val.checkResultDesc,
				//     checkResult: val.checkResult
				//   }))
				// }
				this.axios({
					url,
					method: 'post',
					data,
				}).then((res) => {
					if (res.code !== 200) {
						this.$Message.warning(res.msg);
					}
					if (!flag) {
						this.$router.push('/devScene/deviceSpotCheck/hall');
					}
				});
			}
		},
		closeMance() {
			const data = {
				taskId: this.detail.id,
				caseEndReason: this.detail.caseEndReason,
			};
			finishCase(data).then((res) => {
				this.$Message.success('结案成功');
				this.$router.push('/maintenanceList');
			});
		},

		baoExport() {
			const params = {
				id: this.detail.taskId,
			};
			const filName = '点检内容';
			this.axios({
				method: 'get',
				url: '/dms/dcmMaintainTask/exportItem',
				responseType: 'blob',
				params,
			}).then((res) => {
				fileDownload(res, filName + '.xlsx');
			});
		},
		previewClicjk(item, index, arr) {
			if (this.util.fileType(item.fileName) === 'file') {
				this.iframeShow = true;
				let env = process.env.NODE_ENV;
				let origin = window.location.origin;
				let path = '/';
				if (env === 'tong') {
					path = '';
				}
				let fileUrl = origin + this.util.filePathToUrl(item.filePath);
				this.iframeModalSrc = origin + path + `/fileServer/onlinePreview?url=${fileUrl}`;
			} else {
				if (this.galleryIndex) {
					this.galleryIndex = null;
				}
				let list = [];
				list = arr.filter((val) => this.util.fileType(val.fileName) !== 'file');
				// this.galleryIndex = index
				this.galleryImages = list.map((val) => {
					let objPath = val.filepath || val.filePath;
					if (this.util.fileType(objPath) === 'video') {
						val.filetype = 'video/mp4';
					}
					if (this.util.fileType(objPath) === 'image') {
						val.filetype = 'image/jpeg';
					}
					return {
						type: val.filetype,
						href: this.util.filePathToUrl(val.filepath || val.filePath),
					};
				});
				this.galleryIndex = this.galleryImages.findIndex((val) => val.href === this.util.filePathToUrl(item.filepath || item.filePath));
			}
		},
		checkInfo(row, num, index) {
			this.index = index;
			this.tarGetObj = row;
			switch (num) {
				case 1:
					this.useTablelist = row.ddevSpotCheckTaskDevRefs;
					this.useTableStatus = true;
					break;
				case 3:
					this.fileTablelist = row.taskFile || [];
					this.fileTableStatus = true;
					break;
				case 2:
					this.materTablelist = row.ddevSpotCheckTaskMaterialRefs;
					this.materTableStatus = true;
					break;
			}
		},
		back() {
			this.$emit('changeDetailVisible', false);
		},
		seeDetail(row) {
			this.visible = true;
			this.getWlDetail(row);
		},
		getWlDetail(row) {
			this.axios({
				method: 'get',
				url: '/dms/dcmMaintainTask/queryByItemId',
				params: {
					itemId: row.itemId,
					taskId: this.detail.taskId,
				},
			}).then((res) => {
				if (res.code === 200) {
					this.materialList = res.data.materialList;
					this.toolList = res.data.toolList;
				} else {
					this.$Message.warning({
						content: res.msg,
						duration: 6,
						closable: true,
					});
				}
			});
		},
	},
};
</script>
<style scoped lang="scss">
::v-deep .ivu-input-number {
	width: 100% !important;
}
</style>
<style lang="scss">
.materBox {
	display: flex;
	align-items: center;
	flex-wrap: wrap;

	.operationBtn {
		cursor: pointer;
		margin: 0 10px;
		white-space: nowrap;
	}

	.operationBtn:hover {
		transition: all 0.3s linear;
		color: #035beb;
	}

	.icon {
		border: 1px solid #187bdb;
		border-radius: 30px;
		padding: 5px 20px 5px 20px;
		display: flex;
		align-items: center;
		//margin-left/*:*/ 20px;
		color: #187bdb;
		margin: 0 16px 16px 16px;
		cursor: pointer;

		i {
			font-size: 20px;
			font-weight: bold;
		}
	}
}

.box_footer {
	width: 100%;
	height: 56px;
	background: #ffffff;
	display: flex;
	justify-content: flex-end;
	align-items: center;

	.btn {
		margin: 8px 12px;
		width: 112px;
		height: 40px;
		background: rgb(3, 91, 235);
		border-radius: 25px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
		font-weight: bold;
		color: #ffffff;
	}
}

::v-deep .blueimp-gallery > .close {
	display: block !important;
}

.imgBoxlist {
	width: 100%;
	height: 50vh;

	.videoList {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;

		.ivu-row {
			width: 100%;
		}

		.itemCol {
			width: 100%;
			height: 100px;
			padding: 0 5px;

			.van-badge__wrapper {
				width: 100%;
				height: 100%;

				::v-deep .van-uploader__preview {
					display: none !important;
				}
			}

			.van-uploader {
				width: 100%;

				.van-uploader__wrapper {
					.van-uploader__upload {
						width: 100%;
						height: 100px;
						margin: 0 !important;
					}
				}
			}
		}
	}

	.box_wrapper {
		padding: 0 5px;
	}

	.itemCol {
		width: 100%;
		height: 200px;

		.item {
			display: block;
			width: 100%;
			height: 100%;

			.fileSty {
				display: flex;
				justify-content: center;
				align-items: center;
				background: rgb(255, 237, 137);
				width: 100%;
				height: 100%;
			}

			img {
				width: 100%;
				height: 100%;
			}

			video {
				width: 100%;
				height: 100%;
				object-fit: fill;
			}
		}
	}
}

.checkMaintainDetail {
	//background: #fff;
	.erroBox {
		background-color: #ffffff;
		height: calc(100vh - 200px);
		position: relative;

		.erroBox_list {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: absolute;
			top: 200px;
			left: 35%;
		}

		.btn {
			width: 112px;
			height: 32px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 14px;
			font-weight: 400;
			color: #035beb;
			border-radius: 25px;
			border: 1px solid #035beb;
			margin-top: 20px;
		}

		.textOne {
			font-size: 14px;
			display: inline-block;
			margin-bottom: 5px;
			font-weight: bold;
			color: #00142d;
		}

		.textTwo {
			font-size: 14px;
			font-weight: 400;
			color: #00142d;
		}

		.text {
			display: inline-block;
			margin-bottom: 20px;
			font-size: 14px;
			font-weight: 400;
			color: rgba(0, 20, 45, 0.5);
		}

		.imgBox {
			width: 189px;
			height: 142px;
			display: flex;
			justify-content: center;
			align-items: center;

			img {
				width: 100%;
				height: 100%;
			}
		}
	}

	.title {
		display: flex;
		justify-content: flex-start;
		font-size: 20px;
		padding: 10px;
		border-bottom: 1px solid #dddddd;
		align-items: center;

		.back {
			color: #187bdb;
			font-size: 16px;
			padding-left: 20px;
			cursor: pointer;
		}
	}

	.titleItem {
		position: relative;
		font-size: 18px;
		font-weight: bold;
		padding: 0;

		.scoreBox {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;

			.item_score {
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.ivu-rate-star {
					font-size: 20px;
				}

				.text {
					display: inline-block;
					padding-right: 15px;
				}
			}
		}

		.titleItem_box {
			.text {
				font-size: 18px;
				font-weight: bold;
			}

			.btn_box {
				cursor: pointer;
				padding: 0 15px;
				font-size: 15px;
				font-weight: bold;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				i {
					display: inline-block;
					cursor: pointer;
					font-size: 30px;
				}
			}

			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.checkObject {
			display: flex;
			flex-wrap: wrap;
			padding: 0 !important;
			/*border-bottom: 2px solid #D7D7D7;*/
			font-family: 'Arial Normal', 'Arial', sans-serif;
			font-weight: 400;
			font-style: normal;
			letter-spacing: normal;

			.checkObjectItem {
				display: flex;
				flex: 33.33%;

				.checkObjectName {
					height: 40px;
					line-height: 40px;
					width: 100%;
					border: 1px solid #eeeeee;
					background: #f5f6f7;
					text-align: left;
					padding-left: 10px;
					color: #666666;
				}

				.checkObjectValue {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					height: 40px;
					line-height: 40px;
					width: 100%;
					border: 1px solid #eeeeee;
					padding-left: 10px;
					color: #333;

					.ivu-tooltip {
						height: 40px;
						line-height: 40px;
					}
				}
			}
		}

		.checkTool {
			display: flex;
			padding: 20px;

			.checkToolItem {
				flex: 1;

				.checkObjectName {
					height: 40px;
					line-height: 40px;
					border: 1px solid #eeeeee;
					background: #f5f6f7;
					text-align: center;
				}

				.checkObjectValue {
					height: 40px;
					line-height: 40px;
					border: 1px solid #eeeeee;
					text-align: center;
				}
			}
		}

		.searchBox {
			.label {
				display: flex;
			}
		}
	}

	.contentTable {
		margin: 0;

		.operationBtn {
			padding: 0 4px;
			color: #187bdb;
			cursor: pointer;
		}
	}

	.titleItem::before {
		content: '' !important;
		width: 0;
		height: 0;
	}
}

.over-wrapper {
	width: 200px;
	/*height: 23px;*/
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
</style>
